<template>
  <div class="project-detail">
    <a-card
      :bordered="false"
      :title="'项目名称：' + data.proName"
      :body-style="{ padding: '24px 32px' }"
    >
      <a slot="extra" @click="$router.push('/user-center/project')">
        项目信用中心
      </a>
      <a-descriptions title="项目基础信息" style="margin-bottom: 20px;">
        <a-descriptions-item label="施工单位">
          {{ data.conUnit }}
        </a-descriptions-item>
        <a-descriptions-item label="项目名称">
          {{ data.proName }}
        </a-descriptions-item>
        <a-descriptions-item label="项目地点">
          {{ data.proAddress }}
        </a-descriptions-item>
        <a-descriptions-item label="发包单位">
          {{ data.outUnit }}
        </a-descriptions-item>
        <a-descriptions-item label="项目工期至">
          {{ data.proTime }}
        </a-descriptions-item>
      </a-descriptions>
      <a-descriptions title="项目相关图片资料" style="margin-bottom: 20px;">
        <a-descriptions-item span="2">
          <a
            :href="data.bidOntract"
            download="/images/logo.png"
            target="_blank"
          >
            1. 项目中标合同
          </a>
        </a-descriptions-item>
        <a-descriptions-item span="2">
          <a
            :href="data.tenderFile"
            download="/images/logo.png"
            target="_blank"
          >
            2. 项目招投标文件
          </a>
        </a-descriptions-item>
        <a-descriptions-item span="2">
          <a :href="data.bidFile" download="/images/logo.png" target="_blank">
            3. 中标通知书
          </a>
        </a-descriptions-item>
        <a-descriptions-item span="2">
          <a :href="data.conCer" download="/images/logo.png" target="_blank">
            4. 项目施工许可证
          </a>
        </a-descriptions-item>
        <a-descriptions-item span="2">
          <a :href="data.planCer" download="/images/logo.png" target="_blank">
            5. 项目规划许可证
          </a>
        </a-descriptions-item>
        <a-descriptions-item span="2">
          <a :href="data.saveCer" download="/images/logo.png" target="_blank">
            6. 建筑施工安全生产许可证
          </a>
        </a-descriptions-item>
        <a-descriptions-item span="2">
          <a
            :href="data.creditReport"
            download="/images/logo.png"
            target="_blank"
          >
            7. 企业信用报告
          </a>
        </a-descriptions-item>
        <a-descriptions-item span="2">
          <a
            :href="data.commitment"
            download="/images/logo.png"
            target="_blank"
          >
            8. 项目经理、技术负责人和施工管理负责人签字样式确认以及承诺书
          </a>
        </a-descriptions-item>
        <a-descriptions-item span="2">
          <a
            :href="data.authClientBook"
            download="/images/logo.png"
            target="_blank"
          >
            9. 施工企业授权委托书
          </a>
        </a-descriptions-item>
        <a-descriptions-item span="2">
          <a
            :href="data.payCommitLetter"
            download="/images/logo.png"
            target="_blank"
          >
            10. 项目唯一指定结算账户确认书以及承诺函
          </a>
        </a-descriptions-item>
        <a-descriptions-item span="2">
          <a
            :href="data.holderCommitLetter"
            download="/images/logo.png"
            target="_blank"
          >
            11. 控股股东或实控连带担保承诺函
          </a>
        </a-descriptions-item>
      </a-descriptions>
      <a-descriptions title="项目唯一结算信息">
        <a-descriptions-item label="项目总金额（元）">
          {{ data.allPrice }}
        </a-descriptions-item>
        <a-descriptions-item label="账号名">
          {{ data.bankName }}
        </a-descriptions-item>
        <a-descriptions-item label="账号">
          {{ data.bankNumber }}
        </a-descriptions-item>
        <a-descriptions-item label="开户行">
          {{ data.bankAddress }}
        </a-descriptions-item>
      </a-descriptions>
      <a-descriptions title="额度信息" style="margin-bottom: 20px;">
        <a-descriptions-item span="1" label="授信总额度">
          <div class="money-wrapper">{{ data.applyPrice | money }}元</div>
        </a-descriptions-item>
        <a-descriptions-item label="申请授权金额（元）" span="2">
          <div class="money-wrapper">{{ data.applyPrice | money }}元</div>
        </a-descriptions-item>
        <a-descriptions-item span="1" label="已用额度">
          <div class="money-wrapper">{{ data.applyPrice | money }}元</div>
        </a-descriptions-item>
        <a-descriptions-item span="1" label="可借额度">
          <div class="money-wrapper">{{ data.applyPrice | money }}元</div>
        </a-descriptions-item>
        <a-descriptions-item span="1" label="已还">
          <div class="money-wrapper">{{ sum | money }}元</div>
        </a-descriptions-item>
      </a-descriptions>
    </a-card>

    <a-card>
      <div class="v-title">还款记录（此项目内）</div>
      <a-table
        style="margin-top: 20px;"
        :columns="columns"
        :bordered="true"
        :data-source="list"
        rowKey="ID"
      >
        <div slot="expectDate" slot-scope="text, record">
          {{ formatDate(record.expectDate) }}
        </div>
        <div slot="payDate" slot-scope="text, record">
          <span v-if="record.payDate.Valid === true">
            {{ formatDate(record.payDate.Time) }}
          </span>
        </div>
        <div slot="un" slot-scope="text, record">
          {{ Number(record.expectPrice - record.payPrice) }}
        </div>
        <div slot="payPic" slot-scope="text, record">
          <img v-if="record.payPic !== ''" :src="record.payPic" />
        </div>
      </a-table>
    </a-card>
  </div>
</template>

<script>
import { getProjectDetail } from "@/api/account";
import dayjs from "dayjs";
const columns = [
  {
    title: "期数",
    dataIndex: "period",
    scopedSlots: { customRender: "period" }
  },
  {
    title: "应还日期",
    dataIndex: "expectDate",
    scopedSlots: { customRender: "expectDate" },
    align: "center"
  },
  {
    title: "应还金额",
    dataIndex: "expectPrice",
    scopedSlots: { customRender: "expectPrice" },
    align: "center"
  },
  {
    title: "实际还款日期",
    dataIndex: "payDate",
    scopedSlots: { customRender: "payDate" },
    align: "center"
  },
  {
    title: "实际还款金额",
    dataIndex: "payPrice",
    scopedSlots: { customRender: "payPrice" },
    align: "center"
  },

  {
    title: "本期未还金额",
    dataIndex: "un",
    scopedSlots: { customRender: "un" },
    align: "center"
  },
  {
    title: "还款凭证",
    dataIndex: "payPic",
    scopedSlots: { customRender: "payPic" },
    align: "center"
  }
];
export default {
  data() {
    return {
      data: {},
      columns,
      sum: 0,
      list: []
    };
  },
  mounted() {
    this.getProjectDetail();
  },
  methods: {
    formatDate(value) {
      if (!value || typeof value === "object") {
        return "";
      }
      return dayjs(value).format("YYYY-MM-DD");
    },
    async getProjectDetail() {
      const res = await getProjectDetail(this.$route.params.id);
      this.data = res.data.reuserProject;
      this.list = this.data.user_project_refund;
      for (let i = 0; i < this.list.length; i++) {
        this.sum += this.list[i].payPrice;
      }
      console.log(this.list);
      // eslint-disable-next-line no-empty
      // for (var i = 0; i < this.list.length; i++) {
      //   this.list[i].expectDate = this.formatDate(this.list[i].expectDate);
      //   // eslint-disable-next-line no-empty
      //   if (this.list[i].payDate.Valid === false) {
      //     this.list[i].payDate = null;
      //   } else {
      //     this.list[i].payDate = this.formatDate(this.list[i].payDate.Time);
      //   }
      // }
    }
  }
};
</script>

<style lang="less" scoped>
.project-detail {
  .money-wrapper {
    color: @red;
    font-weight: bold;
  }
}
</style>
